<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="js/common/echats5.3.0.js"></script>
    <script src="js/common/jquery-2.1.4.min.js"></script>
    <script src="js/common/echarts-gl.min.js"></script>
    <script src="js/common/rem.js"></script>
    <script src="js/common/wuxiang.js"></script>
    <script src="https://webapi.amap.com/maps?v=2.0&key=58b2727d1279ff7cdae043dc1159051f&plugin=AMap.ElasticMarker"></script>
    <script src="https://webapi.amap.com/loca?v=2.0.0&key=58b2727d1279ff7cdae043dc1159051f"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/animate.min.css" />
    <link rel="stylesheet" href="./css/animate.css" />
    <link rel="stylesheet" href="./css/swiper.min.css" />
    <link rel="stylesheet" href="./css/goverMap.css" />
    <script src="js/common/countNum.js"></script>
    <script src="js/common/crypto-js.min.js"></script>
    <script src="js/common/url.js"></script>
</head>
<style>
    .amap-marker img{
        /*width:20px;*/
        /*height: auto;*/
        object-fit: contain;
    }
    /* 新增主题切换按钮样式 */
    .theme-toggle-btn {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 999;
        padding: 8px 16px;
        background-color: #333;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    .theme-toggle-btn:hover {
        background-color: #555;
    }
    .theme-toggle-btn.dark {
        background-color: #666;
    }
</style>
<body style="overflow: hidden;color: #333">
<!--标题-->
<div class="title-box">
    <span id="nameBox"></span>长河便民终端分布图
</div>
<!-- 单个主题切换按钮 -->
<button id="theme-btn" class="theme-toggle-btn">切换暗色</button>
<!-- 地图 -->
<div id="map" style="
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                z-index: 0;
            "></div>
<!-- 搜索框 -->
<div class="left-list-box">
    <div class="left-search-box">
        <input class="spec-input" id="searchName" placeholder="搜索位置、政务大厅、办事街道处"/>
        <img src="images/goverMap/search-map.png" alt="" onclick="searchList()">
        <img src="images/goverMap/open-list.png" class="open-list" alt="" onclick="openClose()">
        <img src="images/goverMap/close-list.png" class="close-list" alt="" onclick="openClose()">
    </div>
        <div class="left-list" id="leftBox">
            <div class="item-box">
                <div class="item-case" onclick="checkSpecTYpe('区县',4)">
                    <img src="images/goverMap/county.png" alt="">
                    <div class="item-name-box">
                        区县(<span id="countyNum">0</span>)
                    </div>
                    <label class="item-switch-box">
                        <input type="checkbox" checked onclick="toggleSwitch(this,'4')">
                        <span class="slider round"></span>
                    </label>
                </div>
                <div class="item-case" onclick="checkSpecTYpe('乡镇',5)">
                    <img src="images/goverMap/town.png" alt="">
                    <div class="item-name-box">
                        乡镇(<span id="townNum">0</span>)
                    </div>
                    <label class="item-switch-box">
                        <input type="checkbox" checked  onclick="toggleSwitch(this,'5')">
                        <span class="slider round"></span>
                    </label>
                </div>
                <div class="item-case">
                    <img src="images/goverMap/city.png" alt="" onclick="checkSpecTYpe('社区',6)">
                    <div class="item-name-box">
                        社区(<span id="villageNum">0</span>)
                    </div>
                    <label class="item-switch-box">
                        <input type="checkbox" checked  onclick="toggleSwitch(this,'6')">
                        <span class="slider round"></span>
                    </label>
                </div>
                <div class="item-case">
                    <img src="images/goverMap/terminal-map.png" alt="" onclick="checkSpecTYpe('自助终端',7)">
                    <div class="item-name-box">
                        政务查询机(<span id="terminalNum">0</span>)
                    </div>
                    <label class="item-switch-box">
                        <input type="checkbox" checked  onclick="toggleSwitch(this,'7')">
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
            <div class="item-list">
                <div class="item-title" id="searchTitle">热门搜索</div>
                <div class="item-list-box">
                    <!--                <div class="item-list-case">-->
                    <ul  id="searchList">

                    </ul>
                    <div class="no-content" id="noContent">
                        <img src="images/goverMap/no-content.png" alt="">
                        <div>暂无数据</div>
                    </div>
                    <!--                </div>-->

                </div>
            </div>
        </div>
</div>
<!-- 弹出框 -->
<div class="map-detail-box" id="maskBox">
        <div class="map-detail" id="specDetail">
            <div class="map-title-box">
                <div id="maskTitle">阳泉市矿区政务服务中心</div>
                <img src="images/goverMap/close-map.png" alt="" onclick="closeMask()">
            </div>
            <div class="detail-time">
                <div>办公电话：<span id="maskPhone"></span></div>
                <div class="spec-time-box">
                    <div class="spec-time-box-text">服务信息：</div>
                    <div id="maskTime"></div>
                </div>
            </div>
            <div class="detail-distance-box">
                <div class="list-left-box">
                    <div class="map-content-box">
                        <div class="map-content-tip">办公地址：</div>
                        <img src="images/goverMap/map-pin.png" alt="">
                        <div><span id="maskDetail"></span></div>
                    </div>
                </div>
            </div>
            <div class="detail-img-box">
                <div class="detail-button-box">
                    <div id="slideImg" class="detail-button-item" onclick="changeImg(1)">外部图片</div>
                    <div id="floorImg" class="detail-button-item" onclick="changeImg(2)">楼层布局图</div>
                </div>
                <div class="detail-img-sans" id="slideImgSwiper">
                    <div class="swiper-container swiper-container-one">
                        <div class="detail-img-list-box swiper-wrapper" id="slideImgBox">

                        </div>
                        <div class="swiper-button-next swiper-next-one"></div>
                        <div class="swiper-button-prev swiper-prev-one"></div>
<!--                        <div class="swiper-scrollbar swiper-scrollbar-one"></div>-->
                    </div>
                </div>
                <div class="detail-img-sans" id="floorImgSwiper">
                    <div class="swiper-container swiper-container-two">
                        <div class="detail-img-list-box swiper-wrapper" id="floorImgBox">
                        </div>
                        <div class="swiper-button-next swiper-next-two"></div>
                        <div class="swiper-button-prev swiper-prev-two"></div>
<!--                        <div class="swiper-scrollbar swiper-scrollbar-two"></div>-->
                    </div>

                </div>
            </div>
        </div>
</div>
<!--图片列表-->
    <div class="map-detail-box" id="maskImgBox" style="justify-content: center;align-items: center" >
        <div class="allimgbox">
            <div class="swiper-container swiper-container-three">
                <div class="swiper-wrapper" id="allImgBox">
                </div>
                <div class="swiper-button-next swiper-next-three"></div>
                <div class="swiper-button-prev swiper-prev-three"></div>
                <!--                        <div class="swiper-scrollbar swiper-scrollbar-two"></div>-->
            </div>
        </div>
        <div onclick="closeImg()" class="closeImgBox">X</div>
<!--        <img src="" alt="" id="showImg">-->
    </div>
</body>

</html>
<script src="./js/goverMap/swiper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="./js/goverMap/goverMap.js"></script>
